<template>
  <div class="template">
    <Form
        ref="editForm"
        :model="form"
        :rules="diyData.rules"
        :label-width="140"
      >
      <FormItem label="默认运费：" prop="title">
            <div>
             每个订单默认运费  
             <InputNumber :min="0"  placeholder="￥0.0"  v-model="defaultFee" style="width:70px;margin:0px 10px" />
            <span>元</span>
            <Button type="primary" @click="getConfirm(1)" style="margin-left:30px">保存</Button>
            </div>
        </FormItem>
        <FormItem label="指定运费：" prop="pid">
            <div class="fee" v-for="(item,index) in customList" :key="index">
                  <treeselect
                    style="width: 250px"
                    :multiple="true"
                        v-model="item.areaStr"
                        :options="cityList"
                        placeholder="请选择"
                        />
                 <span  style="margin-left:10px">每个订单默认运费</span>  
                 <Input placeholder="￥0.0" v-model="item.amount" style="width:70px;margin:0px 10px" />
                 <span>元</span>
                  <Button type="primary" @click="getConfirm(2,item)" style="margin-left:30px">保存</Button>
                 <Button @click="deteleFee(2,item,index)" style="background:#E5E5E5;margin-left:30px ">删除</Button>
            </div>
            <p class="add-btn"  @click="addFree(2)">+ 新增指定地区运费</p>
        </FormItem>
    
        <FormItem label="条件包邮：" prop="imUrl">
              <div class="fee" v-for="(item,index) in freeList" :key="index">
                <treeselect
                style="width: 250px"
                    v-model="item.areaStr"
                    :multiple="true"
                    :options="cityList"
                    placeholder="请选择"
                    />
                 <!-- <TreeSelect v-model="item.areaStr" :data="cityList" placeholder="请选择" style="width: 250px"></TreeSelect>     -->
                 <span  style="margin-left:10px">每个订单商品金额满</span>  
                 <Input placeholder="￥0.0" v-model="item.amount" style="width:70px;margin:0px 10px" />
                 <span>元包邮</span>
                  <Button type="primary" @click="getConfirm(3,item)" style="margin-left:30px">保存</Button>
                 <Button @click="deteleFee(3,item,index)" style="background:#E5E5E5;margin-left:30px ">删除</Button>
            </div>
            <p class="add-btn" @click="addFree(3)">+ 新增包邮条件</p>
        </FormItem>
         <FormItem label="暂不支持发货地区：" prop="imUrl">
             <div class="fee">
            <treeselect
                style="width: 250px"
                v-model="unsupportList.areaStr"
                :multiple="true"
                :options="cityList"
                placeholder="请选择"
                />
             <Button type="primary" @click="getConfirm(4)" style="margin-left:30px">保存</Button>
              </div>
        </FormItem>
      </Form>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {apiDeliverysettingArea,apiDeliverysettingConfig,apiDeliverysettingDelete,apiDeliverysettingSave} from '@/api/freight-manage.js'
export default {
  name: "freight-manage",
  components: {
    Treeselect
  },
  data() {
    return {
      value: '', // 绑定值
      treeData: [ // 树形数据结构
        {
          title: 'Node1',
          value: '0-0',
          children: [
            { title: 'Child1', value: '0-0-0' },
            { title: 'Child2', value: '0-0-1' }
          ]
        },
      ],
    
      form: {
        amount:'',
        areaStr:[],
      },
    defaultFee:'',//默认运费
    customList:[],//指定运费
    freeList:[],//条件包邮
    unsupportList:{
        areaStr:[],
    },//不支持地区


      // query参数
      query: {},
      // 搜索参数
      search: {},
      diyDom: {},
      diyData: {
        rules: {},
      },
      cityList: [],
    };
  },
  methods: {
    getDeliverysettingArea(){
        apiDeliverysettingArea().then(res=>{
            this.cityList=res.data.map(item=>{
                var obj={
                    id:item.id,
                    label:item.name,
                    children:[]
                }
                if(item.cityList&&item.cityList.length>0){
                    obj.children=item.cityList.map(row=>{
                        row.id=row.parentId+'_'+row.id
                        row.label=row.name 
                        return row
                    })
                }
                return obj
            })
            // console.log(this.cityList)
        })
    },
    getInfro(){
        apiDeliverysettingConfig().then(res=>{
                this.defaultFee=res.data.defaultFee
                this.customList=res.data.customList.map(item=>{
                    item.areaStr=item.list.map(res=>{
                        console.log(res)
                        if(res.cityId){
                          return res.provinceId+'_'+res.cityId
                        }else{
                            return  res.provinceId
                            
                        }
                    })
                    console.log(item.areaStr)
                    
                    return item
                })
                this.freeList=res.data.freeList.map(item=>{
                    item.areaStr=item.list.map(res=>{
                        console.log(res)
                        if(res.cityId){
                          return res.provinceId+'_'+res.cityId
                        }else{
                            return  res.provinceId
                            
                        }
                    })
                    return item
                })
                var unsupportList=res.data.unsupportList.map(item=>{
                    item.areaStr=item.list.map(res=>{
                        console.log(res)
                        if(res.cityId){
                          return res.provinceId+'_'+res.cityId
                        }else{
                            return  res.provinceId
                            
                        }
                    })

                    return item
                })
                this.unsupportList=unsupportList[0]
                console.log(this.unsupportList)
        })
    },
    addFree(type){
        if(type==2){
            var obj={
                areaStr:[],
                amount:'',
                id:''
            }
            this.customList.push(obj)
        }else if(type==3){
            var obj={
                areaStr:[],
                amount:'',
                id:''
            }
            this.freeList.push(obj)
        }
    },
    deteleFee(type,item,index){
        if(type==2){
            if(item.id){
            this.getDeliverysettingDelete(item.id)
            }else{
                this.customList.splice(index,1)
            }
            
        }else if(type==3){
            if(item.id){
                this.getDeliverysettingDelete(item.id)
            }else{
                this.freeList.splice(index,1)
            }
            
        }
    },
    getDeliverysettingDelete(id){
        apiDeliverysettingDelete({id:id}).then(res=>{
            if(res.code==200){
                this.getInfro()
                this.$Message.success('删除成功');
            }else{
                this.$Message.error(res.msg)
            }
        })
    },
    //保存
    getConfirm(type,row){
        var opt={
            type:type,
        }
        if(type==1){
            opt.amount=this.defaultFee
        }else if(type==2||type==3){
            opt.amount=this.defaultFee
            opt.amount=row.amount||''
            opt.areaStr=row.areaStr
            opt.id=row.id
            opt.areaStr=opt.areaStr.join(',')
        }else{
            opt.areaStr=this.unsupportList.areaStr
            opt.areaStr=opt.areaStr.join(',')
        }
        
        
        apiDeliverysettingSave(opt).then(res=>{
            if(res.code==200){
                this.getInfro()
                this.$Message.success('保存成功');
            }else{
                this.$Message.error(res.msg)
            }
        })
    },
   
  },
  mounted() {
    this.getInfro()
    this.getDeliverysettingArea()
  },
};
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  .fee{
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    display: flex;
    align-items: center;
    line-height: 20.27px;
    color: rgba(56, 56, 56, 1);
  }
  .add-btn{
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(42, 130, 228, 1);
        text-align: left;
        cursor: pointer;
  }
}
</style>
